<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="#"
        type="index"
        show-overflow-tooltip
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column prop="tel" label="电话" width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tel">
            {{ scope.row.tel.substr(0, 3) + '****' + scope.row.tel.substr(7) }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色"
            width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="school_id"
        label="驾校"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="team_id"
        label="关联机构"
        align="center"
      ></el-table-column>
      <el-table-column prop="is_operator" label="账号类型" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.is_operator == 1?'管理员':'普通用户'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
           width="200"
        align="center"
      ></el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
          :disabled="!checkPermission(['accountUpdateStatus'])"
            v-model="scope.row.status"
            @change="changestatus(scope.row.status, scope.row.id)"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="200"
        fixed="right"
        v-if="checkPermission(['accountUpdate','accountDelete'])"
      >
        <template slot-scope="scope">
          <span>
            <span class="edittext addColor" v-if="!checkPermission(['accountUpdate']) || scope.row.is_operator == 1" >编辑</span>
             <span class="edittext" @click="editform(scope.row.id)" v-else>编辑</span>
          </span>
          <span>
            <span class="edittext addColor"  v-if="scope.row.is_operator == 1 || !checkPermission(['accountDelete'])">删除</span>
            <span class="edittext" @click="deleteitem(scope.row.id)" v-else>删除</span>
          </span>

        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//按钮权限验证
//api
import { acountUpdateStatus } from '@/api/rule'

import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
    }
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    tabData(val) {
      this.tableData = val.list
      this.pages = val.page
    },
  },
  methods: {
    //权限验证
    checkPermission,
    handleSizeChange(val) {
      this.$emit('changepageTotal', val)
    },
    handleCurrentChange(val) {
      this.$emit('changepage', val)
    },
    //修改热门状态
    async changestatus(val, id) {

      let state = val?0:1
      let params = {
        id,
        status: state,
      }
          console.log(params)
      let data = await acountUpdateStatus(params)
      if (data.code == '0000') {
       this.$parent.refreshData();
      } else {
        //刷新列表
       this.$parent.refreshData();
      }
    },
    //编辑
    editform(id) {
      let params = {
        id,
        type: 1,
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit', params)
    },
    //删除
    deleteitem(id) {
      this.$emit('deleteitem', id)
    },
    roleEdit(val) {
      let params = {
        id: val.id,
        title: val.title,
      }
      this.$emit('roleEdit', params)
    },
  },
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}

.edittext {
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.addColor{
  color: #ccc;
 cursor: not-allowed;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
